<template>
  <el-form :model="form" label-width="auto" style="max-width: 1620px">

    <el-button>https://doc.tizdata.com/xiaozhi/650/#71-打印模板 报表设计器如何生成打印模板</el-button>
    <el-form-item label="Chart名称">
      <el-input v-model="form.name"/>
    </el-form-item>
    <!--
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
-->
    <el-form-item label="config.json">
      <el-input v-model="form.config" type="textarea" rows="1" clearable class="scrollable-textarea"/>
    </el-form-item>
    <el-form-item label="dataConfig.json">
      <el-input v-model="form.dataConfig" type="textarea" rows="1" class="scrollable-textarea"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">预览chart</el-button>

    </el-form-item>

    <div id="chartContainerTest" style="width: 100%; height: 1000px"></div>
  </el-form>
</template>
<script setup>
//挂载时候，构建bi展现器实例
import {reactive} from 'vue';
import {onMounted} from "vue";

import {
  response_data_rtn as xzchart_1_response_dat_rtn
} from "@/views/chart/Chart_test/response_data_rtn_char_test.js";

let reportInstance;
let option = {}
const form = reactive({
  name: '',
  region: '',
  delivery: false,
  type: [],
  resource: '',
  config: reactive([]),
  dataConfig: reactive([]),
})
const updateConfigAndData = () => {
  try {
    option.reportConfig = JSON.parse(form.config);
    option.reportData = [];
    option.paramsConfig = [];
    document.getElementById("chartContainerTest").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
    reportInstance = new XZDashboard("#chartContainerTest", option);
    reportInstance.updateData(JSON.parse(form.dataConfig));//这里传入的就是  chartDesigner模板需要的数据集名称，json数据集自带数据，外部数据不需要记录
    //reportInstance.updateData([]);//这里传入[],表示没有用到任何的数据

    reportInstance.initView();
  } catch (error) {
    console.log("chart_test.vue.....updateConfigAndData .... error....", error);
  }
}

const onSubmit = () => {
  console.log('chart_test.vue......submit!')
  updateConfigAndData();
}

function onUpdateData(datasets, params) {
  return new Promise((resolve, reject) => {
    resolve([]);

  })
}

//导入BI报表对应的完整的数据集

onMounted(() => {
  option.reportConfig = [];
  option.reportData = [];
  option.paramsConfig = [];
});

</script>

<style scoped>
.scrollable-textarea /deep/ .el-textarea__inner {
  overflow: auto;
  overflow-y: hidden;
  white-space: nowrap;
  word-wrap: normal;
  word-break: keep-all;
  max-width: 100%;
}
</style>
